<template>
	<view class="pages">
		<view class="header">
			<view class="header-left">
				<view class="box">
					<text style="font-size: 72rpx;">您好</text>
					<text style="width: 384rpx;font-size: 48rpx;font-weight: 700;color: #fff;">欢迎登录店店有客</text>
				</view>
				<image
				style="width: 348rpx;height: 348rpx;position: absolute;right: 30rpx;top: 140rpx;"
					src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_logobg@3x.png"
				/>
			</view>
			
		</view>
		<view class="content">  
        <uni-forms ref="form" :model="formData" :rules="rules" @submit="onSubmit">  
			<!-- <uni-forms-item name="phone" style="margin-left: 24rpx;margin-bottom: 0;"> -->
				<input type="number" class="uni-easyinput" v-model="formdata.phone" placeholder="请输入您的手机号" placeholder-style="font-size:32rpx" />
			<!-- </uni-forms-item> -->
			<!-- <uni-forms-item name="password" style="margin-left: 24rpx;margin-bottom: 32rpx;"> -->
				<input class="uni-easyinpu" v-model="formdata.password" placeholder="请输入您的密码" placeholder-style="font-size:32rpx" :password="showPassword" />	
			<!-- </uni-forms-item> -->
			<image class="uni-icon" :src="[!showPassword ? 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_mimak@3x.png' : 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_mimag@3x.png']"
						@click="changePassword()" />
				
			<view style="display: flex;justify-content: space-between;">
				<text class="wenti" @click="gotoReset()">忘记密码?</text>
				<!-- <text class="wenti" @click="gotoSign()">注册新用户</text> -->
			</view>
            <button class="sub" form-type="submit" @click="submitForm">登录</button>  
            <!-- <button class="zhuce" form-type="submit" @click="gotoSign">注册</button>   -->
        </uni-forms>  
    </view> 
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';
import { useMemberStore } from '../../store/modules/member'// 导入你的 state 对象
import { httpRequest } from '../../utils/http'
import { onLoad } from '@dcloudio/uni-app';
//切换登陆模式
const memberStore = useMemberStore()
const isShow = ref(true)
const showPassword = ref(true)
const { safeAreaInsets } = uni.getSystemInfoSync()
const formdata = reactive(
	{
	phone:'',
	password:''
}
)

onLoad((e)=>{
//检测是否登陆 已登录跳转首页
if(uni.getStorageSync('token')){
		uni.switchTab({ url: '/pages/index/index' })
	}
})

const rules = reactive({
	phone:[{
		required:true,
		errorMessage:'请输入手机号',
	}]
})
const gotoSign = () =>{
	uni.navigateTo({ url: '/pageC/index/sign' })
}
const gotoReset = () => {
	uni.navigateTo({ url: '/pageC/index/reset' })
}


		const changePassword = ()=>{
			console.log(1);
			showPassword.value = !showPassword.value
		}
	const submitForm=()=>{
		//表单验证
		// this.$refs.form.validate()

		if(!formdata.phone||!formdata.password){
			uni.showToast({
				title:'用户名密码不能为空',
				icon:'none'
			})
			return
		}

		console.log(formdata.value);

		//登录请求(原生)
		uni.request({
			// url:"https://www.diandianyouke.cn:8081/api/businLogin",
			url:"https://www.diandianyouke.cn:8081/api/businLogin",
			method: 'POST',
			data:formdata,
			header:{'Content-Type':'application/x-www-form-urlencoded',
        			'Authorization': 'Bearer your-access-token'},
			success:(res)=>{
				console.log(res);
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				if(!res.data.success){
					uni.hideLoading()
					uni.showToast({
						title:res.data.message,
						icon:'none'
					})
					return
				}
				//存储token
				console.log(res.data.data);
				uni.setStorageSync('token', res.data.data.token)
				uni.setStorageSync('business', res.data.data.business)
				uni.hideLoading()
				setTimeout(() => {
                 // 页面跳转
				 uni.showToast({
					title: '登录成功',
					mask: true
				 })
                  uni.switchTab({ url: '/pages/index/index' })
                }, 500)
			},
			fail:(err)=>{
				console.log(err);
				uni.hideLoading()
				uni.showToast({
					title:"登录失败",
					icon:'none'
				})
			},
		})
	}
</script>

<style lang="scss">
	.pages{
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		overflow: hidden;
		overflow-y: scroll;
		.header{
			width: 100%;
			height: 610rpx;
			overflow: hidden;
			background: linear-gradient(135deg,rgba(155,98,252,1)0%,rgba(181,139,252,1)100%);
			.header-left{
				display: flex;
    			line-height: 90rpx;
    			justify-content: space-between;
    			height: 191rpx;
    			width: 100%;
				.box{
					position: absolute;
    				top: 267rpx;
					display: flex;
					flex-direction: column;
					font-size: 72rpx;
					font-weight: 700;
					color: #fff;
					margin-left: 48rpx;
				}
				.icon{
					margin-top:20rpx;
					width: 40rpx;
					height: 40rpx;
					// margin: 60rpx 68rpx 16rpx 14rpx;
				}
				.yanzhengma{
					width: 250rpx;
					height: 50rpx;
					border: 0px solid #000;
					size: 32rpx;
					text-align: center;
					margin-top: 20rpx;
				}
			}
			
		}
		.title{
			font-size: 52rpx;
			font-weight: 520;
			color: #404040;
			margin-left: 16rpx;
			margin-bottom: 100rpx;
		}
		.content{
			box-sizing: border-box;
			width: 100%;
			padding: 24rpx 48rpx;
    		position: absolute;
    		top: 464rpx;
    		background-color: #fff;
    		border-radius: 48rpx 48rpx 0 0;
			.uni-easyinput{
				width: 654rpx;
    			margin-bottom: 24rpx;
    			height: 48rpx;
    			border-bottom: 1px solid #d9d9d9;
    			padding: 24rpx 0;

			}

		.uni-easyinpu{
			    height: 112rpx;
			width: 654rpx;
			border-bottom: 1px solid #d9d9d9;
			margin-bottom: 32rpx;
		}
		.uni-icon{
			z-index: 999;
    		width: 48rpx;
    		height: 48rpx;
    		position: absolute;
    		top: 180rpx;
    		right: 72rpx;
		}
		.wenti{
			font-size: 28rpx;
			color: #a7a7a7;
			// margin-top: 32rpx;
		}
		.sub{
			width: 654rpx;
    		height: 88rpx;
    		background-color: rgba(142,84,244,1);
			font-size: 32rpx;
    		color: #fff;
    		text-align: center;
    		line-height: 97rpx;
			margin: 0;
			margin-top: 96rpx;
    		border-radius: 344rpx;
		}
		.zhuce{
			width: 654rpx;
    		height: 88rpx;
    		background-color: rgba(241,241,241,1);
			font-size: 32rpx;
    		color: rgba(48,49,51,1);
    		text-align: center;
    		line-height: 97rpx;
			margin: 0;
    		margin-top: 24rpx;
    		border-radius: 344rpx;
			border: none;
		}
		}
		.btm{
			width: 100%;
			margin-top: 80rpx;
			button{
				width: 100%;
				height: 100rpx;
				background-color:#F1F2F4;
				font-size: 32rpx;
				border: none;
			}
			.quxiao{
				margin-top: 20rpx;
			}
			
		}
	}
</style>
